// 引入react
import * as React from 'react';
import {StyleSheet, Alert, View, Text, Dimensions, Platform, ScrollView, TouchableOpacity} from 'react-native';
import {HeaderTitle} from '../../../../../../componet/settingComponent/HeaderTitle';

import {BrLine} from '../../../../../../componet/settingComponent/BrLine';
import {BottomButton} from '../../../../../../componet/settingComponent/BottomButton';
import {SafeAreaView} from 'react-native-safe-area-context';

import {deleteSignPlace, getSignPlaceList} from '../../../../../../api/signPlace';
import {Loading} from '../../../../../../utils/Loading';
import {Toast} from '../../../../../../utils/Toast';
import Icons from 'react-native-vector-icons/AntDesign';
import AllStyle from '../../../../../../style';


let width = Dimensions.get('window').width;

/**
 * @Description:
 * @author TangYong
 * @date 2022/12/22
 */
export class SignPlace extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            empPlanClassesId: this.props.route.params.empPlanClassesId == null ? null : this.props.route.params.empPlanClassesId,
            placeLs: [],
        };
    }

    //生命周期：组件挂载后
    componentDidMount() {
        this.getList();
    }

    componentDidUpdate(prevProps: Readonly<P>, prevState: Readonly<S>, snapshot: SS) {
        if (this.props.route.params != prevProps.route.params) {
            this.getList();
        }
    }

    //方法
    back = () => {


        let placeLs = this.state.placeLs;
        let newplaceLs = [];
        for (let i of placeLs) {
            newplaceLs.push(i.signPlaceId);
        }
        this.goto('SaveSignPlanGroup', {
            title: '保存考勤方案组',
            signPlaceIds: newplaceLs,
        });
    };
    goto = (name, params) => {
        const route = {
            name: name,
            params: {
                routePathName: this.props.route.name,
                ...params,
            },

        };
        this.props.navigation.navigate(route);
    };
    getList = () => {
        let data = {
            page: 1,
            limit: 20,
            empPlanClassesId: this.state.empPlanClassesId,
        };
        Loading.show();
        getSignPlaceList(data).then(res => {
            let {page} = res;
            let ls = page.list;
            this.setState({placeLs: ls});
            Loading.hidden();
        }).catch(err => {
            Toast.showWarning(err.toString());
            Loading.hidden();
        }).finally(()=>{
            Loading.hidden();
        });
    };
    setPlace = () => {

    };
    del = (id) => {
        let data = [id];
        Loading.show();
        deleteSignPlace(data).then(res => {
            Loading.hidden();
            this.getList();
        }).catch(err => {
            Loading.hidden();
            Toast.showWarning(err.toString());
        }).finally(()=>{
            Loading.hidden();
        });
    };
    //方法
    add = () => {

    };
    test = (date) => {
        console.log(date);
    };

    //DOM
    render() {

        return (
            <SafeAreaView edges={['top', 'left', 'right', 'bottom']} style={{flex: 1, backgroundColor: '#ffffff'}}>
                <View style={style.container}>
                    <HeaderTitle goBack={() => this.back()} headtitle={this.props.route.params.title}></HeaderTitle>
                    <ScrollView>
                        {this.state.placeLs.map((item, index) => {
                            return (
                                <View key={index}>
                                    <View style={style.body_item}>
                                        <View style={style.addText}>
                                            <TouchableOpacity onPress={() => this.goto('addMap', {
                                                    title: '选择地点',
                                                    location: {
                                                        latitude: item.placeLatitude,
                                                        longitude: item.placeLongitude,
                                                    },
                                                    signPlaceId: item.signPlaceId,
                                                },
                                            )}>
                                                <Text style={{
                                                    maxWidth: width - 25 - 30 - 15 - 15,
                                                    fontSize: 16,
                                                    color: '#171B1D',
                                                    marginBottom: 2,
                                                }}>{item.signPosition}</Text>
                                                <Text style={{
                                                    fontSize: 12,
                                                    color: '#747578',
                                                }}>允许打卡范围{item.errorRange}米内</Text>
                                            </TouchableOpacity>
                                        </View>
                                        <TouchableOpacity onPress={() => {
                                            Alert.alert('解除关联', '确定解除关联此地址吗？', [
                                                {
                                                    text: '取消',
                                                    style: 'cancel',
                                                },
                                                {
                                                    text: '确定', onPress: () => {
                                                        this.del(item.signPlaceId);
                                                    },
                                                },
                                            ]);

                                        }}>
                                            <Icons name={'closecircleo'} style={{color: '#747578', marginRight: 15}}
                                                   size={20}/>
                                        </TouchableOpacity>

                                    </View>
                                    <BrLine></BrLine>
                                </View>

                            );
                        })}


                    </ScrollView>
                    <BottomButton click={() => {
                        this.goto('addMap', {title: '选择地点', location: {}})
                    }} title={'添加新地点'}></BottomButton>


                </View>
            </SafeAreaView>
        );
    }

}

const style = StyleSheet.create({
    //样式
    container: {
        backgroundColor: '#F1F0F5',
        flex: 1,
    },
    body_item: {
        backgroundColor: '#FFF',
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center',
        paddingTop: 15,
        paddingLeft: 15,
        paddingRight: 15,
        paddingBottom: 15,
    },
    addText: {},
});
